ஜாவாஸ்கிரிப்ட் மாட்யூல் கிராஃப் செயல்திறன்: சார்புநிலை பகுப்பாய்வு வேக மேம்படுத்தல்

நவீன ஜாவாஸ்கிரிப்ட் மேம்பாட்டில், குறிப்பாக React, Angular, மற்றும் Vue.js போன்ற கட்டமைப்புகளில், பயன்பாடுகள் ஒரு மாடுலர் கட்டமைப்பைப் பயன்படுத்தி உருவாக்கப்படுகின்றன. இதன் பொருள், பெரிய குறியீடு தளங்களை மாட்யூல்கள் எனப்படும் சிறிய, மீண்டும் பயன்படுத்தக்கூடிய அலகுகளாக உடைப்பதாகும். இந்த மாட்யூல்கள் ஒன்றுக்கொன்று சார்ந்து, மாட்யூல் வரைபடம் எனப்படும் ஒரு சிக்கலான வலையமைப்பை உருவாக்குகின்றன. உங்கள் பில்ட் செயல்முறையின் செயல்திறன், மற்றும் இறுதியில் பயனர் அனுபவம், இந்த வரைபடத்தின் திறமையான உருவாக்கம் மற்றும் பகுப்பாய்வை பெரிதும் சார்ந்துள்ளது.

ஒரு மெதுவான மாட்யூல் வரைபடம் குறிப்பிடத்தக்க அளவு நீண்ட பில்ட் நேரங்களுக்கு வழிவகுக்கும், இது டெவலப்பர் உற்பத்தித்திறனை பாதித்து, வரிசைப்படுத்தல் சுழற்சிகளை மெதுவாக்குகிறது. உங்கள் மாட்யூல் வரைபடத்தை எவ்வாறு மேம்படுத்துவது என்பதைப் புரிந்துகொள்வது, செயல்திறன் மிக்க வலைப் பயன்பாடுகளை வழங்குவதற்கு மிக முக்கியமானது. இந்தக் கட்டுரை, மாட்யூல் வரைபட உருவாக்கத்தின் ஒரு முக்கிய அம்சமான சார்புநிலைத் தீர்வு வேகத்தை பகுப்பாய்வு செய்வதற்கும் மேம்படுத்துவதற்கும் உள்ள நுட்பங்களை ஆராய்கிறது.

ஜாவாஸ்கிரிப்ட் மாட்யூல் வரைபடத்தைப் புரிந்துகொள்ளுதல்

மாட்யூல் வரைபடம் உங்கள் பயன்பாட்டில் உள்ள மாட்யூல்களுக்கு இடையிலான உறவுகளைக் குறிக்கிறது. வரைபடத்தில் உள்ள ஒவ்வொரு முனையும் ஒரு மாட்யூலைக் (ஒரு ஜாவாஸ்கிரிப்ட் கோப்பு) குறிக்கிறது, மற்றும் விளிம்புகள் அந்த மாட்யூல்களுக்கு இடையிலான சார்புநிலைகளைக் குறிக்கின்றன. Webpack, Rollup, அல்லது Parcel போன்ற ஒரு பண்ட்லர் உங்கள் குறியீட்டைச் செயலாக்கும்போது, அது தேவையான அனைத்து மாட்யூல்களையும் மேம்படுத்தப்பட்ட வெளியீட்டுக் கோப்புகளில் தொகுக்க இந்த வரைபடத்தைக் கடந்து செல்கிறது.

முக்கிய கருத்துக்கள்

• மாட்யூல்கள்: குறிப்பிட்ட செயல்பாடுகளைக் கொண்ட தற்சார்பு குறியீடு அலகுகள். அவை சில செயல்பாடுகளை வெளிப்படுத்துகின்றன (exports) மற்றும் பிற மாட்யூல்களிலிருந்து செயல்பாடுகளைப் பயன்படுத்துகின்றன (imports).
• சார்புநிலைகள்: மாட்யூல்களுக்கு இடையிலான உறவுகள், இதில் ஒரு மாட்யூல் மற்றொன்றின் ஏற்றுமதிகளைச் சார்ந்துள்ளது.
• மாட்யூல் தீர்வு: ஒரு import கூற்று எதிர்கொள்ளப்படும்போது சரியான மாட்யூல் பாதையைக் கண்டறியும் செயல்முறை. இது கட்டமைக்கப்பட்ட கோப்பகங்கள் வழியாகத் தேடுவது மற்றும் தீர்வு விதிகளைப் பயன்படுத்துவதை உள்ளடக்குகிறது.
• தொகுத்தல் (Bundling): பல மாட்யூல்களையும் அவற்றின் சார்புநிலைகளையும் ஒன்று அல்லது அதற்கு மேற்பட்ட வெளியீட்டுக் கோப்புகளில் இணைக்கும் செயல்முறை.
• ட்ரீ ஷேக்கிங்: தொகுத்தல் செயல்முறையின் போது இறந்த குறியீட்டை (பயன்படுத்தப்படாத ஏற்றுமதிகள்) நீக்கும் ஒரு செயல்முறை, இது இறுதி தொகுப்பின் அளவைக் குறைக்கிறது.
• கோட் ஸ்ப்ளிட்டிங்: உங்கள் பயன்பாட்டின் குறியீட்டை பல சிறிய தொகுப்புகளாகப் பிரிப்பது, அவை தேவைக்கேற்ப ஏற்றப்படலாம், இது ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்துகிறது.

மாட்யூல் வரைபட செயல்திறனை பாதிக்கும் காரணிகள்

உங்கள் மாட்யூல் வரைபட உருவாக்கம் மற்றும் பகுப்பாய்வின் வேகக்குறைவுக்கு பல காரணிகள் பங்களிக்கக்கூடும். அவையாவன:

• மாட்யூல்களின் எண்ணிக்கை: அதிக மாட்யூல்களைக் கொண்ட ஒரு பெரிய பயன்பாடு இயல்பாகவே ஒரு பெரிய மற்றும் சிக்கலான மாட்யூல் வரைபடத்திற்கு வழிவகுக்கிறது.
• சார்புநிலைகளின் ஆழம்: ஆழமாகப் பதிக்கப்பட்ட சார்புநிலை சங்கிலிகள் வரைபடத்தைக் கடக்கத் தேவைப்படும் நேரத்தை கணிசமாக அதிகரிக்கக்கூடும்.
• மாட்யூல் தீர்வு சிக்கலானது: தனிப்பயன் மாற்றுப்பெயர்கள் அல்லது பல தேடல் பாதைகள் போன்ற சிக்கலான மாட்யூல் தீர்வு உள்ளமைவுகள் செயல்முறையை மெதுவாக்கலாம்.
• சுழற்சி சார்புநிலைகள்: சுழற்சி சார்புநிலைகள் (மாட்யூல் A மாட்யூல் B-ஐச் சார்ந்திருக்கும், மற்றும் மாட்யூல் B மாட்யூல் A-ஐச் சார்ந்திருக்கும்) முடிவற்ற சுழற்சிகள் மற்றும் செயல்திறன் சிக்கல்களை ஏற்படுத்தலாம்.
• திறமையற்ற கருவி கட்டமைப்பு: பண்ட்லர்கள் மற்றும் தொடர்புடைய கருவிகளின் உகந்தமற்ற உள்ளமைவுகள் திறமையற்ற மாட்யூல் வரைபட உருவாக்கத்திற்கு வழிவகுக்கும்.
• கோப்பு முறைமை செயல்திறன்: மெதுவான கோப்பு முறைமை வாசிப்பு வேகம் மாட்யூல் கோப்புகளைக் கண்டுபிடித்து படிக்க எடுக்கும் நேரத்தை பாதிக்கலாம்.

மாட்யூல் வரைபட செயல்திறனை பகுப்பாய்வு செய்தல்

உங்கள் மாட்யூல் வரைபடத்தை மேம்படுத்துவதற்கு முன், தடைகள் எங்கே உள்ளன என்பதைப் புரிந்துகொள்வது முக்கியம். உங்கள் பில்ட் செயல்முறையின் செயல்திறனை பகுப்பாய்வு செய்ய பல கருவிகள் மற்றும் நுட்பங்கள் உங்களுக்கு உதவும்:

1. பில்ட் நேர பகுப்பாய்வு கருவிகள்

பெரும்பாலான பண்ட்லர்கள் பில்ட் நேரங்களை பகுப்பாய்வு செய்ய உள்ளமைக்கப்பட்ட கருவிகள் அல்லது செருகுநிரல்களை வழங்குகின்றன:

• Webpack: --profile கொடியைப் பயன்படுத்தவும் மற்றும் webpack-bundle-analyzer அல்லது speed-measure-webpack-plugin போன்ற கருவிகளைப் பயன்படுத்தி வெளியீட்டை பகுப்பாய்வு செய்யவும். webpack-bundle-analyzer உங்கள் தொகுப்பு அளவுகளின் காட்சிப் பிரதிநிதித்துவத்தை வழங்குகிறது, அதே நேரத்தில் speed-measure-webpack-plugin பில்ட் செயல்முறையின் ஒவ்வொரு கட்டத்திலும் செலவழித்த நேரத்தைக் காட்டுகிறது.
• Rollup: ஒரு செயல்திறன் அறிக்கையை உருவாக்க --perf கொடியைப் பயன்படுத்தவும். இந்த அறிக்கை மாட்யூல் தீர்வு மற்றும் மாற்றம் உட்பட, தொகுத்தல் செயல்முறையின் ஒவ்வொரு கட்டத்திலும் செலவழித்த நேரம் பற்றிய விரிவான தகவல்களை வழங்குகிறது.
• Parcel: பார்சல் தானாகவே கன்சோலில் பில்ட் நேரங்களை வழங்குகிறது. மேலும் ஆழமான பகுப்பாய்விற்கு --detailed-report கொடியையும் நீங்கள் பயன்படுத்தலாம்.

இந்தக் கருவிகள் எந்த மாட்யூல்கள் அல்லது செயல்முறைகள் அதிக நேரம் எடுக்கின்றன என்பது பற்றிய மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகின்றன, இது உங்கள் மேம்படுத்தல் முயற்சிகளை திறம்பட கவனம் செலுத்த அனுமதிக்கிறது.

2. விவரக்குறிப்பு கருவிகள் (Profiling Tools)

உங்கள் பில்ட் செயல்முறையின் செயல்திறனை பகுப்பாய்வு செய்ய உலாவி டெவலப்பர் கருவிகள் அல்லது Node.js விவரக்குறிப்பு கருவிகளைப் பயன்படுத்தவும். இது CPU-தீவிர செயல்பாடுகள் மற்றும் நினைவக கசிவுகளை அடையாளம் காண உதவும்.

• Node.js Profiler: பில்ட் செயல்முறையின் போது CPU பயன்பாடு மற்றும் நினைவக ஒதுக்கீட்டை பகுப்பாய்வு செய்ய உள்ளமைக்கப்பட்ட Node.js விவரக்குறிப்பான் அல்லது Clinic.js போன்ற கருவிகளைப் பயன்படுத்தவும். இது உங்கள் பில்ட் ஸ்கிரிப்டுகள் அல்லது பண்ட்லர் உள்ளமைவுகளில் உள்ள தடைகளை அடையாளம் காண உதவும்.
• உலாவி டெவலப்பர் கருவிகள்: பில்ட் செயல்முறையின் சுயவிவரத்தைப் பதிவுசெய்ய உங்கள் உலாவியின் டெவலப்பர் கருவிகளில் உள்ள செயல்திறன் தாவலைப் பயன்படுத்தவும். இது நீண்ட நேரம் இயங்கும் செயல்பாடுகள் அல்லது திறமையற்ற செயல்பாடுகளை அடையாளம் காண உதவும்.

3. தனிப்பயன் பதிவு மற்றும் அளவீடுகள்

மாட்யூல் தீர்வு அல்லது குறியீடு மாற்றம் போன்ற குறிப்பிட்ட பணிகளில் செலவழித்த நேரத்தைக் கண்காணிக்க உங்கள் பில்ட் செயல்முறையில் தனிப்பயன் பதிவு மற்றும் அளவீடுகளைச் சேர்க்கவும். இது உங்கள் மாட்யூல் வரைபடத்தின் செயல்திறன் பற்றிய மேலும் நுணுக்கமான நுண்ணறிவுகளை வழங்க முடியும்.

எடுத்துக்காட்டாக, ஒவ்வொரு மாட்யூலையும் தீர்க்க எடுக்கும் நேரத்தை அளவிட, ஒரு தனிப்பயன் Webpack செருகுநிரலில் மாட்யூல் தீர்வு செயல்முறையைச் சுற்றி ஒரு எளிய டைமரை நீங்கள் சேர்க்கலாம். இந்தத் தரவை பின்னர் தொகுத்து, மெதுவான மாட்யூல் தீர்வு பாதைகளை அடையாளம் காண பகுப்பாய்வு செய்யலாம்.

மேம்படுத்தல் உத்திகள்

உங்கள் மாட்யூல் வரைபடத்தில் செயல்திறன் தடைகளை நீங்கள் கண்டறிந்ததும், சார்புநிலைத் தீர்வு வேகம் மற்றும் ஒட்டுமொத்த பில்ட் செயல்திறனை மேம்படுத்த பல்வேறு மேம்படுத்தல் உத்திகளை நீங்கள் பயன்படுத்தலாம்.

1. மாட்யூல் தீர்வை மேம்படுத்துதல்

மாட்யூல் தீர்வு என்பது ஒரு import கூற்று எதிர்கொள்ளப்படும்போது சரியான மாட்யூல் பாதையைக் கண்டறியும் செயல்முறையாகும். இந்த செயல்முறையை மேம்படுத்துவது பில்ட் நேரங்களை கணிசமாக மேம்படுத்தும்.

• குறிப்பிட்ட இறக்குமதிப் பாதைகளைப் பயன்படுத்தவும்: ../../module போன்ற சார்பு இறக்குமதிப் பாதைகளைப் பயன்படுத்துவதைத் தவிர்க்கவும். அதற்கு பதிலாக, முழுமையான பாதைகளைப் பயன்படுத்தவும் அல்லது இறக்குமதி செயல்முறையை எளிதாக்க மாட்யூல் மாற்றுப்பெயர்களை உள்ளமைக்கவும். எடுத்துக்காட்டாக, ../../../components/Button என்பதற்குப் பதிலாக @components/Button ஐப் பயன்படுத்துவது மிகவும் திறமையானது.
• மாட்யூல் மாற்றுப்பெயர்களை உள்ளமைக்கவும்: குறுகிய மற்றும் மேலும் படிக்கக்கூடிய இறக்குமதிப் பாதைகளை உருவாக்க உங்கள் பண்ட்லர் உள்ளமைவில் மாட்யூல் மாற்றுப்பெயர்களைப் பயன்படுத்தவும். இது உங்கள் பயன்பாடு முழுவதும் இறக்குமதிப் பாதைகளைப் புதுப்பிக்காமல் உங்கள் குறியீட்டை எளிதாக மறுசீரமைக்கவும் உங்களை அனுமதிக்கிறது. Webpack-ல், இது resolve.alias விருப்பத்தைப் பயன்படுத்தி செய்யப்படுகிறது. Rollup-ல், நீங்கள் @rollup/plugin-alias செருகுநிரலைப் பயன்படுத்தலாம்.
• resolve.modules-ஐ மேம்படுத்துதல்: Webpack-ல், resolve.modules விருப்பம் மாட்யூல்களைத் தேட வேண்டிய கோப்பகங்களைக் குறிப்பிடுகிறது. இந்த விருப்பம் சரியாக உள்ளமைக்கப்பட்டுள்ளதா மற்றும் தேவையான கோப்பகங்களை மட்டுமே உள்ளடக்கியுள்ளதா என்பதை உறுதிப்படுத்தவும். தேவையற்ற கோப்பகங்களைச் சேர்ப்பதைத் தவிர்க்கவும், ஏனெனில் இது மாட்யூல் தீர்வு செயல்முறையை மெதுவாக்கும்.
• resolve.extensions-ஐ மேம்படுத்துதல்: resolve.extensions விருப்பம் மாட்யூல்களைத் தீர்க்கும்போது முயற்சிக்க வேண்டிய கோப்பு நீட்டிப்புகளைக் குறிப்பிடுகிறது. மிகவும் பொதுவான நீட்டிப்புகள் முதலில் பட்டியலிடப்பட்டுள்ளன என்பதை உறுதிப்படுத்தவும், ஏனெனில் இது மாட்யூல் தீர்வு வேகத்தை மேம்படுத்தும்.
• resolve.symlinks: false (கவனமாக) பயன்படுத்தவும்: நீங்கள் சிம்லிங்குகளைத் தீர்க்கத் தேவையில்லை என்றால், இந்த விருப்பத்தை முடக்குவது செயல்திறனை மேம்படுத்தலாம். இருப்பினும், இது சிம்லிங்குகளை நம்பியிருக்கும் சில மாட்யூல்களை உடைக்கக்கூடும் என்பதை அறிந்து கொள்ளுங்கள். இதை இயக்குவதற்கு முன் உங்கள் திட்டத்திற்கான தாக்கங்களைப் புரிந்து கொள்ளுங்கள்.
• கேச்சிங்கைப் பயன்படுத்துங்கள்: உங்கள் பண்ட்லரின் கேச்சிங் வழிமுறைகள் சரியாக உள்ளமைக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். Webpack, Rollup மற்றும் Parcel அனைத்தும் உள்ளமைக்கப்பட்ட கேச்சிங் திறன்களைக் கொண்டுள்ளன. எடுத்துக்காட்டாக, Webpack இயல்பாக ஒரு கோப்பு முறைமை கேச்-ஐப் பயன்படுத்துகிறது, மேலும் நீங்கள் அதை வெவ்வேறு சூழல்களுக்கு மேலும் தனிப்பயனாக்கலாம்.

2. சுழற்சி சார்புநிலைகளை நீக்குதல்

சுழற்சி சார்புநிலைகள் செயல்திறன் சிக்கல்கள் மற்றும் எதிர்பாராத நடத்தைக்கு வழிவகுக்கும். உங்கள் பயன்பாட்டில் உள்ள சுழற்சி சார்புநிலைகளை அடையாளம் கண்டு நீக்கவும்.

• சார்புநிலை பகுப்பாய்வு கருவிகளைப் பயன்படுத்தவும்: madge போன்ற கருவிகள் உங்கள் குறியீட்டுத் தளத்தில் சுழற்சி சார்புநிலைகளைக் கண்டறிய உதவும்.
• குறியீட்டை மறுசீரமைக்கவும்: சுழற்சி சார்புநிலைகளை அகற்ற உங்கள் குறியீட்டை மறுசீரமைக்கவும். இது பகிரப்பட்ட செயல்பாடுகளை ஒரு தனி மாட்யூலுக்கு நகர்த்துவது அல்லது சார்புநிலை உட்செலுத்தலைப் பயன்படுத்துவதை உள்ளடக்கலாம்.
• சோம்பேறி ஏற்றுதலை (Lazy Loading) கருத்தில் கொள்ளுங்கள்: சில சந்தர்ப்பங்களில், சோம்பேறி ஏற்றுதலைப் பயன்படுத்தி சுழற்சி சார்புநிலைகளை நீங்கள் உடைக்கலாம். இது தேவைப்படும்போது மட்டுமே ஒரு மாட்யூலை ஏற்றுவதை உள்ளடக்குகிறது, இது ஆரம்ப பில்ட் செயல்முறையின் போது சுழற்சி சார்புநிலை தீர்க்கப்படுவதைத் தடுக்கலாம்.

3. சார்புநிலைகளை மேம்படுத்துதல்

உங்கள் சார்புநிலைகளின் எண்ணிக்கை மற்றும் அளவு உங்கள் மாட்யூல் வரைபடத்தின் செயல்திறனை கணிசமாக பாதிக்கலாம். உங்கள் பயன்பாட்டின் ஒட்டுமொத்த சிக்கலைக் குறைக்க உங்கள் சார்புநிலைகளை மேம்படுத்துங்கள்.

• பயன்படுத்தப்படாத சார்புநிலைகளை அகற்றவும்: உங்கள் பயன்பாட்டில் இனி பயன்படுத்தப்படாத எந்தவொரு சார்புநிலையையும் அடையாளம் கண்டு அகற்றவும்.
• இலகுரக மாற்றுகளைப் பயன்படுத்தவும்: பெரிய சார்புநிலைகளுக்கு இலகுரக மாற்றுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். எடுத்துக்காட்டாக, ஒரு பெரிய பயன்பாட்டு நூலகத்தை ஒரு சிறிய, அதிக கவனம் செலுத்திய நூலகத்துடன் மாற்றலாம்.
• சார்புநிலை பதிப்புகளை மேம்படுத்துதல்: வைல்டு கார்டு பதிப்பு வரம்புகளை நம்புவதற்குப் பதிலாக உங்கள் சார்புநிலைகளின் குறிப்பிட்ட பதிப்புகளைப் பயன்படுத்தவும். இது எதிர்பாராத முறிவு மாற்றங்களைத் தடுக்கலாம் மற்றும் வெவ்வேறு சூழல்களில் சீரான நடத்தையை உறுதிசெய்யலாம். இதற்காக ஒரு லாக்ஃபைலைப் (package-lock.json அல்லது yarn.lock) பயன்படுத்துவது *அவசியமானது*.
• உங்கள் சார்புநிலைகளைத் தணிக்கை செய்யுங்கள்: பாதுகாப்பு பாதிப்புகள் மற்றும் காலாவதியான தொகுப்புகளுக்கு உங்கள் சார்புநிலைகளைத் தவறாமல் தணிக்கை செய்யுங்கள். இது பாதுகாப்பு அபாயங்களைத் தடுக்கவும், உங்கள் சார்புநிலைகளின் சமீபத்திய பதிப்புகளைப் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்தவும் உதவும். npm audit அல்லது yarn audit போன்ற கருவிகள் இதற்கு உதவக்கூடும்.

4. கோட் ஸ்ப்ளிட்டிங்

கோட் ஸ்ப்ளிட்டிங் உங்கள் பயன்பாட்டின் குறியீட்டை பல சிறிய தொகுப்புகளாகப் பிரிக்கிறது, அவை தேவைக்கேற்ப ஏற்றப்படலாம். இது ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாக மேம்படுத்தலாம் மற்றும் உங்கள் மாட்யூல் வரைபடத்தின் ஒட்டுமொத்த சிக்கலைக் குறைக்கலாம்.

• பாதை அடிப்படையிலான பிரித்தல்: உங்கள் பயன்பாட்டில் உள்ள வெவ்வேறு பாதைகளின் அடிப்படையில் உங்கள் குறியீட்டைப் பிரிக்கவும். இது பயனர்கள் தற்போதைய பாதைக்குத் தேவையான குறியீட்டை மட்டும் பதிவிறக்கம் செய்ய அனுமதிக்கிறது.
• கூறு அடிப்படையிலான பிரித்தல்: உங்கள் பயன்பாட்டில் உள்ள வெவ்வேறு கூறுகளின் அடிப்படையில் உங்கள் குறியீட்டைப் பிரிக்கவும். இது தேவைக்கேற்ப கூறுகளை ஏற்ற உங்களை அனுமதிக்கிறது, இது ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்கிறது.
• வெண்டர் பிரித்தல்: உங்கள் வெண்டர் குறியீட்டை (மூன்றாம் தரப்பு நூலகங்கள்) ஒரு தனி தொகுப்பாகப் பிரிக்கவும். இது வெண்டர் குறியீட்டைத் தனியாக கேச் செய்ய உங்களை அனுமதிக்கிறது, ஏனெனில் இது உங்கள் பயன்பாட்டுக் குறியீட்டை விட குறைவாகவே மாறும்.
• டைனமிக் இறக்குமதிகள்: தேவைக்கேற்ப மாட்யூல்களை ஏற்ற டைனமிக் இறக்குமதிகளை (import()) பயன்படுத்தவும். இது தேவைப்படும்போது மட்டுமே மாட்யூல்களை ஏற்ற உங்களை அனுமதிக்கிறது, ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைத்து, உங்கள் பயன்பாட்டின் ஒட்டுமொத்த செயல்திறனை மேம்படுத்துகிறது.

5. ட்ரீ ஷேக்கிங்

ட்ரீ ஷேக்கிங் தொகுத்தல் செயல்முறையின் போது இறந்த குறியீட்டை (பயன்படுத்தப்படாத ஏற்றுமதிகள்) நீக்குகிறது. இது இறுதி தொகுப்பு அளவைக் குறைத்து, உங்கள் பயன்பாட்டின் செயல்திறனை மேம்படுத்துகிறது.

• ES மாட்யூல்களைப் பயன்படுத்தவும்: CommonJS மாட்யூல்களுக்கு (require மற்றும் module.exports) பதிலாக ES மாட்யூல்களை (import மற்றும் export) பயன்படுத்தவும். ES மாட்யூல்கள் நிலையான முறையில் பகுப்பாய்வு செய்யக்கூடியவை, இது பண்ட்லர்கள் திறம்பட ட்ரீ ஷேக்கிங் செய்ய அனுமதிக்கிறது.
• பக்க விளைவுகளைத் தவிர்க்கவும்: உங்கள் மாட்யூல்களில் பக்க விளைவுகளைத் தவிர்க்கவும். பக்க விளைவுகள் என்பது உலகளாவிய நிலையை மாற்றும் அல்லது பிற எதிர்பாராத விளைவுகளை ஏற்படுத்தும் செயல்பாடுகள் ஆகும். பக்க விளைவுகளைக் கொண்ட மாட்யூல்களை திறம்பட ட்ரீ ஷேக் செய்ய முடியாது.
• மாட்யூல்களை பக்க விளைவுகளற்றதாகக் குறிக்கவும்: பக்க விளைவுகள் இல்லாத மாட்யூல்கள் உங்களிடம் இருந்தால், அவற்றை உங்கள் package.json கோப்பில் அவ்வாறு குறிக்கலாம். இது பண்ட்லர்கள் மேலும் திறம்பட ட்ரீ ஷேக்கிங் செய்ய உதவுகிறது. தொகுப்பில் உள்ள அனைத்து கோப்புகளும் பக்க விளைவுகளற்றவை என்பதைக் குறிக்க உங்கள் package.json-ல் "sideEffects": false என்பதைச் சேர்க்கவும். சில கோப்புகளில் மட்டுமே பக்க விளைவுகள் இருந்தால், பக்க விளைவுகளைக் கொண்ட கோப்புகளின் வரிசையை நீங்கள் வழங்கலாம், எடுத்துக்காட்டாக "sideEffects": ["./src/hasSideEffects.js"].

6. கருவி உள்ளமைவை மேம்படுத்துதல்

உங்கள் பண்ட்லர் மற்றும் தொடர்புடைய கருவிகளின் உள்ளமைவு உங்கள் மாட்யூல் வரைபடத்தின் செயல்திறனை கணிசமாக பாதிக்கலாம். உங்கள் பில்ட் செயல்முறையின் செயல்திறனை மேம்படுத்த உங்கள் கருவி உள்ளமைவை மேம்படுத்துங்கள்.

• சமீபத்திய பதிப்புகளைப் பயன்படுத்தவும்: உங்கள் பண்ட்லர் மற்றும் தொடர்புடைய கருவிகளின் சமீபத்திய பதிப்புகளைப் பயன்படுத்தவும். புதிய பதிப்புகள் பெரும்பாலும் செயல்திறன் மேம்பாடுகள் மற்றும் பிழை திருத்தங்களை உள்ளடக்கியிருக்கும்.
• இணைத்தன்மையை உள்ளமைக்கவும்: பில்ட் செயல்முறையை இணைக்க உங்கள் பண்ட்லரை பல இழைகளைப் பயன்படுத்த உள்ளமைக்கவும். இது பில்ட் நேரங்களை கணிசமாகக் குறைக்கலாம், குறிப்பாக மல்டி-கோர் இயந்திரங்களில். எடுத்துக்காட்டாக, Webpack இதற்காக thread-loader ஐப் பயன்படுத்த உங்களை அனுமதிக்கிறது.
• மாற்றங்களைக் குறைக்கவும்: பில்ட் செயல்முறையின் போது உங்கள் குறியீட்டிற்குப் பயன்படுத்தப்படும் மாற்றங்களின் எண்ணிக்கையைக் குறைக்கவும். மாற்றங்கள் கணக்கீட்டு ரீதியாக விலை உயர்ந்தவை மற்றும் பில்ட் செயல்முறையை மெதுவாக்கும். எடுத்துக்காட்டாக, நீங்கள் பேபலைப் பயன்படுத்துகிறீர்கள் என்றால், மாற்றப்பட வேண்டிய குறியீட்டை மட்டும் மாற்றவும்.
• வேகமான மினிஃபையரைப் பயன்படுத்தவும்: உங்கள் குறியீட்டைச் சுருக்க terser அல்லது esbuild போன்ற வேகமான மினிஃபையரைப் பயன்படுத்தவும். சுருக்கம் உங்கள் குறியீட்டின் அளவைக் குறைக்கிறது, இது உங்கள் பயன்பாட்டின் ஏற்றுதல் நேரத்தை மேம்படுத்தும்.
• உங்கள் பில்ட் செயல்முறையை சுயவிவரப்படுத்தவும்: செயல்திறன் தடைகளைக் கண்டறிந்து உங்கள் கருவி உள்ளமைவை மேம்படுத்த உங்கள் பில்ட் செயல்முறையைத் தவறாமல் சுயவிவரப்படுத்தவும்.

7. கோப்பு முறைமை மேம்படுத்தல்

உங்கள் கோப்பு முறைமையின் வேகம் மாட்யூல் கோப்புகளைக் கண்டுபிடித்து படிக்க எடுக்கும் நேரத்தை பாதிக்கலாம். உங்கள் மாட்யூல் வரைபடத்தின் செயல்திறனை மேம்படுத்த உங்கள் கோப்பு முறைமையை மேம்படுத்துங்கள்.

• வேகமான சேமிப்பக சாதனத்தைப் பயன்படுத்தவும்: உங்கள் திட்டக் கோப்புகளைச் சேமிக்க SSD போன்ற வேகமான சேமிப்பக சாதனத்தைப் பயன்படுத்தவும். இது கோப்பு முறைமை செயல்பாடுகளின் வேகத்தை கணிசமாக மேம்படுத்தும்.
• நெட்வொர்க் டிரைவ்களைத் தவிர்க்கவும்: உங்கள் திட்டக் கோப்புகளுக்கு நெட்வொர்க் டிரைவ்களைப் பயன்படுத்துவதைத் தவிர்க்கவும். நெட்வொர்க் டிரைவ்கள் உள்ளூர் சேமிப்பகத்தை விட கணிசமாக மெதுவாக இருக்கலாம்.
• கோப்பு முறைமை கண்காணிப்பாளர்களை மேம்படுத்துதல்: நீங்கள் ஒரு கோப்பு முறைமை கண்காணிப்பாளரைப் பயன்படுத்துகிறீர்கள் என்றால், தேவையான கோப்புகள் மற்றும் கோப்பகங்களை மட்டும் கண்காணிக்க அதை உள்ளமைக்கவும். பல கோப்புகளைக் கண்காணிப்பது பில்ட் செயல்முறையை மெதுவாக்கும்.
• RAM டிஸ்க்கைக் கருத்தில் கொள்ளுங்கள்: மிகப் பெரிய திட்டங்கள் மற்றும் அடிக்கடி பில்ட் செய்வதற்கு, உங்கள் node_modules கோப்புறையை RAM டிஸ்க்கில் வைப்பதைக் கருத்தில் கொள்ளுங்கள். இது கோப்பு அணுகல் வேகத்தை வியத்தகு முறையில் மேம்படுத்தும், ஆனால் போதுமான RAM தேவைப்படும்.

நிஜ உலக உதாரணங்கள்

இந்த மேம்படுத்தல் உத்திகள் எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான சில நிஜ உலக உதாரணங்களைப் பார்ப்போம்:

எடுத்துக்காட்டு 1: Webpack உடன் ஒரு React பயன்பாட்டை மேம்படுத்துதல்

React மற்றும் Webpack உடன் உருவாக்கப்பட்ட ஒரு பெரிய இ-காமர்ஸ் பயன்பாடு மெதுவான பில்ட் நேரங்களை அனுபவித்தது. பில்ட் செயல்முறையை பகுப்பாய்வு செய்த பிறகு, மாட்யூல் தீர்வு ஒரு பெரிய தடையாக இருப்பது கண்டறியப்பட்டது.

தீர்வு:

• இறக்குமதிப் பாதைகளை எளிதாக்க webpack.config.js-ல் மாட்யூல் மாற்றுப்பெயர்கள் உள்ளமைக்கப்பட்டன.
• resolve.modules மற்றும் resolve.extensions விருப்பங்கள் மேம்படுத்தப்பட்டன.
• Webpack-ல் கேச்சிங் இயக்கப்பட்டது.

முடிவு: பில்ட் நேரம் 30% குறைக்கப்பட்டது.

எடுத்துக்காட்டு 2: ஒரு Angular பயன்பாட்டில் சுழற்சி சார்புநிலைகளை நீக்குதல்

ஒரு Angular பயன்பாடு எதிர்பாராத நடத்தை மற்றும் செயல்திறன் சிக்கல்களை அனுபவித்தது. madge-ஐப் பயன்படுத்திய பிறகு, குறியீட்டுத் தளத்தில் பல சுழற்சி சார்புநிலைகள் இருப்பது கண்டறியப்பட்டது.

தீர்வு:

• சுழற்சி சார்புநிலைகளை அகற்ற குறியீடு மறுசீரமைக்கப்பட்டது.
• பகிரப்பட்ட செயல்பாடுகள் தனி மாட்யூல்களுக்கு நகர்த்தப்பட்டன.

முடிவு: பயன்பாட்டின் செயல்திறன் கணிசமாக மேம்பட்டது, மற்றும் எதிர்பாராத நடத்தை தீர்க்கப்பட்டது.

எடுத்துக்காட்டு 3: ஒரு Vue.js பயன்பாட்டில் கோட் ஸ்ப்ளிட்டிங்கைச் செயல்படுத்துதல்

ஒரு Vue.js பயன்பாடு ஒரு பெரிய ஆரம்ப தொகுப்பு அளவைக் கொண்டிருந்தது, இது மெதுவான ஏற்றுதல் நேரங்களுக்கு வழிவகுத்தது. ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்த கோட் ஸ்ப்ளிட்டிங் செயல்படுத்தப்பட்டது.

தீர்வு:

Vue Router-ன் சோம்பேறி ஏற்றுதல் அம்சத்தைப் பயன்படுத்தி பாதை அடிப்படையிலான கோட் ஸ்ப்ளிட்டிங் செயல்படுத்தப்பட்டது.

வெண்டர் குறியீடு ஒரு தனி தொகுப்பாகப் பிரிக்கப்பட்டது.

முடிவு: ஆரம்ப ஏற்றுதல் நேரம் 50% குறைக்கப்பட்டது.

முடிவுரை

செயல்திறன் மிக்க வலைப் பயன்பாடுகளை வழங்குவதற்கு உங்கள் ஜாவாஸ்கிரிப்ட் மாட்யூல் வரைபடத்தை மேம்படுத்துவது மிக முக்கியமானது. மாட்யூல் வரைபட செயல்திறனை பாதிக்கும் காரணிகளைப் புரிந்துகொண்டு, உங்கள் பில்ட் செயல்முறையை பகுப்பாய்வு செய்து, மற்றும் பயனுள்ள மேம்படுத்தல் உத்திகளைப் பயன்படுத்துவதன் மூலம், சார்புநிலைத் தீர்வு வேகம் மற்றும் ஒட்டுமொத்த பில்ட் செயல்திறனை நீங்கள் கணிசமாக மேம்படுத்தலாம். இது வேகமான மேம்பாட்டு சுழற்சிகள், மேம்பட்ட டெவலப்பர் உற்பத்தித்திறன் மற்றும் சிறந்த பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.

உங்கள் பில்ட் செயல்திறனைத் தொடர்ந்து கண்காணிக்கவும், உங்கள் பயன்பாடு வளர்ச்சியடையும் போது உங்கள் மேம்படுத்தல் உத்திகளை மாற்றியமைக்கவும் நினைவில் கொள்ளுங்கள். மாட்யூல் வரைபட மேம்படுத்தலில் முதலீடு செய்வதன் மூலம், உங்கள் ஜாவாஸ்கிரிப்ட் பயன்பாடுகள் வேகமாகவும், திறமையாகவும், அளவிடக்கூடியதாகவும் இருப்பதை நீங்கள் உறுதிசெய்யலாம்.